<template>
    <div id="shop_message">
        <loading/>
        <div class="top_head p2">
            <i class="el-icon-arrow-left" @click="goBack()"></i>
            <span class="top_tit">{{shop.title}}</span>
        </div>
        <div class="img_box">
            <el-image :src="shop.img_url" :preview-src-list="[shop.img_url]"></el-image>
        </div>
        <div class="white_bg">
            <div class="shop_price p2">
                <div class="new_price">¥ {{shop.new_price}}</div>
                <div class="old_price">价格：<s>¥ {{shop.old_price}}</s></div>
            </div>
            <div class="shop_tit p2">{{shop.title}}</div>
            <div class="shop_info">
                <div>快递：{{shop.express}}</div>
                <div>月销量：{{shop.sales}}</div>
                <div>{{shop.address}}</div>
            </div>
        </div>
        <div class="white_bg">
            <ul class="shop_item">
                <li>
                    <span class="left">优惠</span>
                    <span class="center">
                        <span class="count">优惠劵</span>
                        店铺优惠劵
                    </span>
                    <span class="right">领取<i class="el-icon-arrow-right"></i></span>
                </li>
                <li>
                    <span class="left">促销</span>
                    <span class="center">
                        <span class="count">积分</span>
                        购买可得{{shop.integral}}积分
                    </span>
                    <span class="right"><i class="el-icon-arrow-right"></i></span>
                </li>
                <li>
                    <span class="left">服务</span>
                    <span class="center">七天无理由退换 · 极速退款 · 假一赔四</span>
                    <span class="right"><i class="el-icon-arrow-right"></i></span>
                </li>
            </ul>
        </div>
        <div class="white_bg">
            <ul class="shop_item">
                <li>
                    <span class="left">选择</span>
                    <span class="center">请选择颜色 尺码</span>
                    <span class="right"><i class="el-icon-arrow-right"></i></span>
                </li>
                <li>
                    <span class="left">参数</span>
                    <span class="center">品牌 材质 尺码</span>
                    <span class="right"><i class="el-icon-arrow-right"></i></span>
                </li>
            </ul>
        </div>
        <div class="white_bg">
            <div class="assess">
                宝贝评价（{{shop.assess}}）
                <span class="right">查看全部<i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="assess">
                问大家（{{shop.question}}）
                <span class="right">查看全部<i class="el-icon-arrow-right"></i></span>
            </div>
        </div>
        <div class="white_bg mb">
            <div class="shop_box">
                <div class="shop_head">
                    <img :src="shop.shop_url">
                    <div>
                        <span>{{shop.shop_title}}</span>
                        <span>
                            <span class="rate">综合评分 {{shop.rate}}</span>
                            <el-rate :value="shop.rate" disabled
                                     text-color="#ff9900">
                            </el-rate>
                        </span>
                    </div>
                </div>
                <div class="shop_btn">
                    <span>进店逛逛</span>
                    <span>全部宝贝</span>
                </div>
            </div>
        </div>

        <div class="shop_bottom p2">
            <div class="bottom_item">
                <i class="iconfont icon-store"></i>
                <span>店铺</span>
            </div>
            <div class="bottom_item">
                <i class="iconfont icon-atm"></i>
                <span>客服</span>
            </div>
            <div class="bottom_item">
                <i class="iconfont icon-favorite"></i>
                <span>收藏</span>
            </div>
            <div class="shop_carbtn">
                <span class="addcar" @click="addshop">加入购物车</span>
                <span class="buyshop">立即购买</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Loading from './animate';
    export default {
        name: "shop",
        data() {
            return {
                shop: {},
                newshop:{}
            }
        },
        components: { Loading },
        mounted() {
            let id = this.$route.params.id
            if (id < 100) {
                this.$http.get('/api/shop/' + id)
                    .then(({data}) => {
                        if (data.code == 200) {
                            this.shop = data.data[0]
                        }
                    })
            } else {
                this.$http.get('/api/gou/shop/' + id)
                    .then(({data}) => {
                        if (data.code == 200) {
                            this.shop = data.data[0]
                        }
                    })
            }
        },
        watch: {
            shop(val) {
                let loading = document.getElementById('loading');
                if (val != null) {
                    document.getElementById('shop_message').removeChild(loading);
                }
            },
            immediate: true,
            deep: true
        },
        methods: {
            goBack() {
                this.$router.back(-1);
            },
            addshop(){
                let lists = JSON.parse(sessionStorage.getItem("lists"))||[];
                this.newshop=lists;
                this.newshop.push(this.shop);
                for(let i =0;i<this.newshop.length;i++){
                    this.newshop[i].num = 1;
                    this.newshop[i].ischeck = false;
                }
                sessionStorage.setItem("lists", JSON.stringify(this.newshop));
                this.$message({
                    showClose: true,
                    message: '加入成功',
                    type: 'success'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../../assets/userIconFont/iconfont.css";
@import "../../style/shop";
</style>